<template>
	<view class="content">
		<view class="infobox">
			<view class="status">
				<text v-if="info.value.repairstatus==2">待维修</text>
				<text v-if="info.value.repairstatus==3">维修中</text>
				<text v-if="info.value.repairstatus==4">待验收</text>
				<text v-if="info.value.repairstatus==5">已完成</text>
				<text class="time">{{info.value.sumbittime}}</text>
			</view>
			<view class="list">
				<view class="title">
					报修人信息
				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/name.png" class="icon"></image>
						姓名
					</label>
					<view style="width:28rpx;height: auto;">
					</view>
					<input :value="info.value.name" disabled />
					<view class="box1" @click="goChat(info.value.personId,info.value.nickname)">
						<text class="button">
							在线联系
						</text>
					</view>

				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/phone.png" class="icon"></image>
						手机号
					</label>
					<input :value="info.value.phone" disabled />
				</view>
				<view class="title">
					报修信息
				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/time.png" class="icon"></image>
						预约时间
					</label>
					<input :value="info.value.ordertime" disabled />


				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/quyu.png" class="icon"></image>
						报修区域
					</label>
					<input :value="info.value.region" disabled />

				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/location.png" class="icon"></image>
						详细地址
					</label>
					<input :value="info.value.address" disabled />
				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/type.png" class="icon"></image>
						故障类型
					</label>
					<input :value="info.value.repairtype" disabled />
				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/section.png" class="icon"></image>
						故障内容
					</label>
					<input :value="info.value.content" disabled />
				</view>

				<view class="photoitem">
					<view class="photo">
						<image src="../../static/icon/photo.png" class="icon"></image>
						故障照片
					</view>
					<view class="uploadBox" v-for="item in info.photos">
						<image :src="item"></image>
					</view>
				</view>



				<!-- 	<view class="title">
					维修人员信息
				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/gongren.png" class="icon"></image>
						维修人
					</label>
					<view style="width:28rpx;height: auto;">
						
					</view>
					
				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/phone.png" class="icon"></image>
						手机号
					</label>
				</view> -->



				<block v-if="info.value.repairstatus==3||info.value.repairstatus==4||info.value.repairstatus==5">
					<view class="title">
						维修结果信息
					</view>
					<view class="item">
						<label>
							<image src="../../static/icon/name.png" class="icon"></image>
							上报人
						</label>
						<input :value="info.value.maintainername" disabled />
					</view>
					
					<view class="item" style="border-bottom: none;display: block;">
						<label>
							<image src="../../static/icon/yijian.png" class="icon"></image>
							上报备注
						</label>
						<view class="textbox">
							<textarea v-model="info.value.result" placeholder="" />
						</view>
					</view>
		
					<view class="uploadBox" style="margin-top: 20rpx;">
						<u-upload class="upload" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"
							name="1" multiple :maxCount="10"></u-upload>
					</view>
				</block>
				
				<template v-if="(info.value.acceptance!==''&&info.value.repairstatus==2)||info.value.repairstatus==5">
					<view class="title">
						验收信息
					</view>
					<view class="item" style="border-bottom: none;display: block;">
						<label>
							<image src="../../static/icon/name.png" class="icon"></image>
							验收人<input style="padding-left: 30rpx;" :value="info.value.acceptance" disabled />
						</label>
						<label>
							<image src="../../static/icon/yijian.png" class="icon"></image>
							验收意见
						</label>
						
						<view class="textbox">
							<textarea v-model="info.value.acceptanceidea" disabled  />
						</view>
					</view>
					
				</template>
				

			</view>
		</view>
		
		<view v-if="info.value.repairstatus==2">
			<view class="box" style="background-color: #3B8AF4;" @click="beginRepair">
				开始维修
			</view>
			<view class="box" style="background-color: #F05C3E;" @click="repersonAssign">
				打回改派
			</view>
		</view>
		<view v-if="info.value.repairstatus==3">
			<view class="box" style="background-color: #3B8AF4;" @click="resultAdd">
				维修结果上报
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import api from '@/api/api'
	// 报修单信息
	let info = reactive({})
	let inputvalue=''
	onLoad((options) => {
		api.getRepairInfo({
			repairId: options.repairId,
		}).then(res => {
			info.value = res.data[0]
		})
	})
	
	const beginRepair=()=>{
		api.beginRepair({repairId:info.value.repairId}).then(res=>{
			if(res.status==200){
				uni.showToast({
					title:'开始维修',
					icon:'none',
					duration:1500
				})
				info.value.repairstatus=3
			}
			
		})
	}
	const repersonAssign=()=>{
		api.repersonAssign({
			repairId:info.value.repairId,
		}).then(res => {
			if(res.status==200){
				uni.showToast({
					title:'打回改派成功',
					icon:'none',
					duration:1500
				})
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1500)
				
			}
		})
	}
	
	const resultAdd=()=>{
		api.repairReport({
			repairId:info.value.repairId,
			result:info.value.result
		}).then(res => {
			if(res.status==200){
				uni.showToast({
					title:'维修结果上报成功',
					icon:'none',
					duration:1500
				})
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1500)
				
			}
		})
	}
	
	const goChat = (toId, toName) => {
		uni.navigateTo({
			url: '/pages/news/chat?toName=' + toName + '&toId=' + toId
		})
	}
	
	
</script>

<style lang="scss">
	.content {
		.infobox {
			margin: 30rpx;

			.status {
				background-color: #F05C3E;
				color: white;
				padding: 20rpx 30rpx;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.time {
					font-size: 24rpx;
				}
			}
		}

		.list {
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
			margin-bottom: 30rpx;
			background-color: white;
			padding: 0 30rpx 30rpx 30rpx;
			border-bottom-left-radius: 16rpx;
			border-bottom-right-radius: 16rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				padding-top: 20rpx;
			}

			.item {
				label {
					padding-right: 30rpx;
					font-size: 28rpx;
					color: #666666;
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						padding-right: 5rpx;
					}
				}

				.box1 {
					.button {
						font-size: 28rpx;
						color: #3B8AF4;
						border: #3B8AF4 1rpx solid;
						padding: 5rpx 10rpx;
						border-radius: 16rpx;
					}
				}

				input {
					flex: 1;
					font-size: 28rpx;
					color: #666666;
				}

				.uploadBox {

					image {
						width: 100rpx;
						height: 100rpx;
					}
				}

				line-height: 100rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: #E6E6E6 1rpx solid;

				.textbox {
					display: block;
					border: #E6E6E6 1rpx solid;
					padding: 20rpx;
					border-radius: 16rpx;
				}
			}

			.photoitem {
				.photo {
					line-height: 100rpx;
					padding-right: 30rpx;
					font-size: 28rpx;
					color: #666666;
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						padding-right: 5rpx;
					}
				}

			}

		}

		.box {
			margin: 10rpx 30rpx;
			color: white;
			font-size: 28rpx;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 16rpx;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
		}
	}
</style>
